<!-- 集中式布局 -->
<template>
  <div>
    <el-container>
      <el-aside width="120px" style="text-align: center;position: fixed;z-index: 99;">
        <el-menu :default-active="defaultActive">
            <el-menu-item v-for="(item,index) in menuList" :index="index + ''" @click="gotoRouteHandle(item,index)">
              <!-- <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg> -->
              <span>{{ item.name }}</span>
            </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container style="position: relative;padding-left: 120px;display: flex;flex-direction: column;">
        <el-header style="text-align: right; font-size: 12px;width: 100%;" v-if="activeList.length > 1">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="(item,index) in activeList" :key="item.name" :label="item.name" :name="item.name"></el-tab-pane>
          </el-tabs>
        </el-header>
        <el-main v-if="activeList.length >= 0" style="padding-top: 0;">
          <iframe
            v-if="item3.meta.iframeUrl"
            :src="item3.meta.iframeUrl"
            width="100%" height="100%" frameborder="0" scrolling="yes">
          </iframe>
          <keep-alive v-else>
            <router-view/>
          </keep-alive>
        </el-main>
      </el-container>

    </el-container>

  </div>
</template>

<script>
export default {
  data() {
    return {
      id:undefined,
      path:undefined,
      menuList:[],
      activeName:'',
      activeList:[],
      name:'',
      childShowType:'',
      defaultActive: '0',
      item3:null
    };
  },
  mounted: function () {

  },
  created() {

  },
  methods: {
    init(id,childShowType) {
      console.log(id,childShowType)
      // console.log(sessionStorage.getItem('dynamicMenuRoutes'))
      this.id = id
      console.log('id',id)
      this.childShowType = childShowType
      this.$nextTick(() => {
          //查询下级菜单
          const menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
          this.menuList = menuList.filter(item => item.type == 0 && item.parenttopId == id)
          console.log("this.menuList",this.menuList)

          //默认选中第一个
          var menu = this.menuList[0]
          //默认激活第一个二级菜单
          this.activeList = menu.list
          //默认激活第一个三级菜单
          this.activeName = menu.list[0].name

          let route = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]').filter(item => item.meta.menuId === id)
          // console.log('route',route)
          let menuRoute = route[0].children[0]
          console.log("默认第一个" + menuRoute)
          console.log(menuRoute)

          this.item3 = menuRoute
          if(!this.item3.meta.iframeUrl){
            console.log("跳转")
            this.$router.replace(
              {
                name:`${this.item3.name}`,
                query: {
                  id: this.id,
                  childShowType:this.childShowType,
                }
              }
            )
          }
      })
    },
    gotoRouteHandle (menu) {
      console.log(menu)
      this.activeList = menu.list
      //激活第一个
      this.activeName = menu.list[0].name
      let route = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]').filter(item => item.meta.menuId === menu.parenttopId)
      // let menuRoute = route[0].children[0]
      console.log(route[0].children)
      let menuRoute = route[0].children.filter(item => item.meta.menuId === menu.list[0].menuId)
      console.log("默认第一个",menuRoute)
      console.log(menuRoute)

      this.item3 = menuRoute[0]
      if(!this.item3.meta.iframeUrl){
        this.$router.replace(
          {
            name:`${this.item3.name}`,
            query: {
              id: this.id,
              childShowType:this.childShowType,
            }
          }
        )
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
      var menu = this.activeList[tab.index]
      let route = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]').filter(item => item.meta.menuId === menu.menuId)
      this.item3 = route[0]
      console.log(route)
      if(!this.item3.meta.iframeUrl){
        this.$router.replace(
          {
            name:`item${menu.menuId}`,
            query: {
              id: this.id,
              childShowType:this.childShowType,
            }
          }
        )
      }
    }
  }
};
</script>

<style>

</style>
